import React from 'react';
import * as echarts from 'echarts';

class EChartDemo extends React.Component {
  myChart = {};
  componentDidMount() {
    this.myChart = echarts.init(document.getElementById('EChartDemo'));
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const _this = this;
    setInterval(function () {
      _this.myChart.resize();
    }, 2000);
  }
  componentDidUpdate() {
    const { data } = this.props;
    var dataArr = [];
    var aa = data.filter((o) => o.eventStatus === '待处理');
    var bb = data.filter((o) => o.eventStatus === '已审核');
    var cc = data.filter((o) => o.eventStatus === '已完结');
    dataArr.push({ value: aa.length, name: '待处理' });
    dataArr.push({ value: bb.length, name: '已审核' });
    dataArr.push({ value: cc.length, name: '已完结' });
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: '案件状态分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          name: '案件类型',
          type: 'pie',
          radius: '50%',
          data: dataArr,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  }
  render() {
    return <div id="EChartDemo" style={{ height: this.props.height }}></div>;
  }
}
export default EChartDemo;
